<template>
  <Dialog
    content-class="Select-Container"
    v-model="asyncShow"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <v-card height="780" flat>
      <v-spacer>
        <v-col :cols="6" class="d-flex align-center">
          <v-text-field
            v-model="searchValue"
            solo
            dense
            hide-details
            flat
            placeholder="Keyword Search"
            class="gray-input"
            @input="inputSearchValue"
          ></v-text-field>
          <v-icon class="ml-2" color="#79839B" @click="search"
            >mdi-magnify</v-icon
          >
        </v-col>
        <v-col class="pt-1">
          <Table
            rounded
            disable-sort
            :search="searchValue"
            :loading="propLoading"
            :obstruct="false"
            :roundedHeader="true"
            :headers="propHeaders"
            :items="propItems"
            class="elevation-0 select-table"
            hide-default-footer
          >
            <template #item="{ item }">
              <tr class="pointer" @click="clickTr(item)">
                <td
                  class="text-left"
                  v-for="header in propHeaders"
                  :key="header.value"
                >
                  {{ item[header.value] }}
                </td>
              </tr>
            </template>
          </Table>
        </v-col>
      </v-spacer>
    </v-card>
  </Dialog>
</template>
<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import Table from "@/components/Maintenance/Table/Table.vue";
@Component({
  components: {
    Dialog,
    Table,
  },
  props: {
    headers: {
      type: Array,
      default: () => [],
    },
    items: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
})
export default class Select extends Vue {
  @PropSync("show", { type: Boolean, default: false })
  asyncShow!: boolean;
  searchValue = "";

  get propHeaders() {
    return this.$props.headers;
  }

  get propItems() {
    return this.$props.items;
  }

  get propLoading() {
    return this.$props.loading;
  }

  search() {
    this.$emit("search", this.searchValue);
  }

  inputSearchValue(val: string) {
    this.$emit("inputSearch", val);
  }

  clickTr(item: object) {
    this.$emit("select", item);
  }
}
</script>
<style lang="scss" scoped>
@import "./Select.scss";
</style>
